<template>
	<view class="box_content">
		<view class="title"> 今日更新 </view>
		<view class="tabs_box1">
			<view class="check_item" :class="currentIndex == index ? 'check_in' :''" v-for="(item,index) in tabsList"
				@click="handClick(index)">
				{{item}}
			</view>
			<!-- <view class="check_item">
			行者
		</view>
		<view class="check_item">
			导航老师
		</view> -->
		</view>
		<view v-for="(item, index) in list" :key="index">
			<view class="Preview_style" v-if="my_level_id<item.grade_auth" @click.stop="goMember">
				该内容仅支持{{
          item.grade_auth == 1
            ? "元气驿站"
            : item.grade_auth == 2
            ? "启初梦谷"
            : item.grade_auth == 3
            ? "青空天台"
            : item.grade_auth == 4
            ? "无极云顶"
            : item.grade_auth == 5
            ? "返朴归源"
            : ""
        }}及以上行者查看
			</view>
			<view v-else-if="(item.file && item.file.length) || item.file_url" class="box_item" @click="goDetail(item)">
				<view class="box_details">
					<view class="details_left">
						<template v-if="item.file_url">
							<image :src="item.file_url" mode=""></image>
						</template>
						<template v-else>
							<image :src="item.file[0].url" mode="" v-if="item.file[0].file_type == 10"></image>
							<image :src="item.file[0].url_img" mode="" v-else></image>
						</template>
						
					</view>
					<view class="details_right">
						<view class="right_title"> {{ item.title || item.name }} </view>
						<view class="right_text">
							{{ item.content || item.jieshao}}
						</view>
						<view class="right_time">
							<image src="../static/images/icon_sy_jinrigengxin_shijian.png" mode=""></image>
							<text>{{ item.new_time }}</text>
							<view v-if="item.is_new" class="new_text"> 新 </view>
						</view>
					</view>
				</view>
			</view>

			<view class="box_item" @click="goDetail(item)" v-else>
				<view class="item">
					<view class="item_title"> {{item.title ||  item.content }} </view>
					<view class="item_time">
						<image src="../static/images/icon_sy_jinrigengxin_shijian.png" mode=""></image>
						<text>{{ item.new_time }}</text>
						<view v-if="item.is_new"> 新 </view>
					</view>
				</view>
			</view>
		</view>

		<view class="box_btn" @click="toUpdate">
			<view> 查看更多 </view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			jinriList: {
				type: Array,
				default: function() {
					return [];
				},
			},
			my_level_id: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				itemList: [],
				tabsList: ['平台', '导航老师', '行者'],
				currentIndex: 0,
				tab_id:1,
				list:[]
			};
		},
		watch: {
			// jinriList: {
			//   deep: true, // 深度监听每一个属性值, 如果是对象可以深度监听
			//   immediate: true, // 进入页面后立即自动调用handler函数
			//   handler(newValue) {
			//     this.itemList = JSON.parse(JSON.stringify(Array.from(newValue)));
			//     this.itemList.shift();
			//     // console.log(Array.from(this.itemList),6666)
			//   },
			// },
		},
		created() {
			this.getList();
		},
		mounted() {},
		methods: {
			getList() {
			  this.$http
			    .pageJinri({ tab_id: this.tab_id, page: 1 })
			    .then((res) => {
			      if (res.data.list.data && res.data.list.data.length >3) {
					  this.list = res.data.list.data.slice(0,3)
				  } else {
					  this.list = res.data.list.data;
				  }
				  
				  console.log('1111111111',this.list);
			      // this.tab_id = res.data.tab_id
			    })
			    .catch((error) => {
			      uni.$u.toast(error);
			    });
			},
			handClick(index) {
				this.currentIndex = index;
				this.tab_id = index + 1;
				this.getList();
			},
			toUpdate() {
				uni.navigateTo({
					url: "/pages/home/updateToday",
				});
			},
			// 跳会员页面
			goMember() {
				uni.navigateTo({
					url: `/pages/member/index`,
				});
			},
			goDetail(item) {
				console.log(item,6666);


				if(this.tab_id == 1){
					uni.navigateTo({
						url: `/pages/training/detail?id=${item.id}&type=${item.type}`,
					});
				} else {
					if (item.type == 1) {
						// 跳飞离洞
						uni.navigateTo({
							url: `/pages/detail/flyDetail?detailType=fei&currentId=${item.id}&from=wei`,
						});
					} else if (item.type == 2) {
						// 跳灵感塔
						uni.navigateTo({
							url: `/pages/detail/flyDetail?detailType=ling&currentId=${item.id}&from=wei`,
						});
					} else if (item.type == 3) {
						// 跳诗心园
						uni.navigateTo({
							url: `/pages/detail/flyDetail?detailType=shi&currentId=${item.id}&from=wei`,
						});
					} else if (item.type == 4) {
						// 跳文心岛
						uni.navigateTo({
							url: `/pages/detail/flyDetail?detailType=wen&currentId=${item.id}&from=wei`,
						});
					} else if (item.type == 5) {
						// 跳共创
						uni.navigateTo({
							url: `/pages/distinguish/discussionGroup?id=${item.id}`,
						});
					} else if (item.type == 6) {
						// 跳游记
						uni.navigateTo({
							url: `/pages/detail/flyDetail?detailType=youji&currentId=${item.id}&from=wei`,
						});
					}
				}

				

			},
		},
	};
</script>

<style scoped lang="scss">
	.box_content {
		width: 100%;
		background: rgba(39, 39, 39, 0.5);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-top: 40rpx;
		padding: 0 30rpx;
		box-sizing: border-box;

		.title {
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			color: #eee;
			padding: 32rpx 0 24rpx 0;
			box-sizing: border-box;
		}

		.box_details {
			width: 100%;
			height: 240rpx;
			display: flex;

			.details_left {
				width: 240rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 9rpx;
				}
			}

			.details_right {
				flex: 1;
				padding-left: 32rpx;
				box-sizing: border-box;
				position: relative;

				.right_title {
					width: 100%;
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: 600;
					color: #eeeeee;
				}

				.right_text {
					width: 100%;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					color: #adadad;
					margin-top: 10rpx;
					overflow: hidden;
					-webkit-line-clamp: 2;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
				}

				.right_time {
					width: 100%;
					position: absolute;
					bottom: 0;
					font-size: 24rpx;
					color: #adadad;
					display: flex;
					align-items: center;

					image {
						width: 24rpx;
						height: 24rpx;
					}

					text {
						margin-left: 11rpx;
					}

					.new_text {
						width: 54rpx;
						height: 34rpx;
						background: #f7e8e2;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #ff8a4c;
						margin-left: 31rpx;
					}
				}
			}
		}

		.Preview_style {
			width: 100%;
			height: 150rpx;
			border-radius: 16rpx;
			background: rgba(105, 113, 151, 0.7);
			margin-top: 24rpx;
			margin-bottom: 24rpx;
			text-align: center;
			line-height: 150rpx;
			color: white;
		}

		.box_item {
			width: 100%;
			margin-bottom: 44rpx;

			.item {

				// view:first-child {
				//   font-size: 32rpx;
				//   font-family: PingFang SC-Medium, PingFang SC;
				//   font-weight: 400;
				//   color: #eeeeee;
				//   margin-top: 44rpx;
				// }
				.item_title {
					overflow: hidden;
					-webkit-line-clamp: 1;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					color: white;
				}

				.item_time {
					display: flex;
					align-items: center;
					padding-top: 16rpx;

					image {
						width: 24rpx;
						height: 24rpx;
					}

					text {
						margin-left: 11rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #adadad;
					}

					view {
						width: 54rpx;
						height: 34rpx;
						background: #f7e8e2;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #ff8a4c;
						margin-left: 31rpx;
					}
				}
			}
		}

		.box_btn {
			width: 100%;
			padding: 0 30rpx 30rpx 30rpx;

			box-sizing: border-box;

			view {
				width: 100%;
				height: 96rpx;
				background: #272c29;
				border-radius: 48rpx 48rpx 48rpx 48rpx;
				color: #eeeeee;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}

	.tabs_box1 {
		width: 100%;
		padding: 24rpx 0 32rpx;
		box-sizing: border-box;
		display: flex;

		.check_item {
			padding: 7rpx 30rpx;
			background: rgba(39, 39, 39, 0.5);
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			margin-right: 16rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #ADADAD;

		}

		.check_in {
			background: #55B877;
			color: #fff;
		}
	}
</style>